<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const status = ref('1')
const keyword = ref('')

function onSearch(keyword) {
  console.log(keyword)
}
</script>

<template>
  <div class="header">
    <div class="search">
      <a-space style="margin-right: 20px;">
        <a-input-search style="width: 420px;" v-model:value="keyword" placeholder="请输入核酸点名称" enter-button="搜索"
          size="large" @search="onSearch" />
      </a-space>

      <a-space>
        <a-select ref="select" v-model:value="status" size="large" style="width: 220px;">
          <a-select-option value="1">畅通</a-select-option>
          <a-select-option value="2">忙碌</a-select-option>
          <a-select-option value="3">休息</a-select-option>
          <a-select-option value="4">拥堵</a-select-option>
        </a-select>
      </a-space>
    </div>
    <div class="header-title">数睿核酸地图</div>
  </div>
</template>

<style scoped>
.header {
  position: relative;
  display: flex;
  flex: 0 0 70px;
  align-items: center;
  padding-left: 0.2rem;
  width: 100%;
  height: 70px;
  background-color: #fff;
  z-index: 3;
  overflow: hidden;
  box-shadow: 1px 4px 6px rgb(0 0 0 / 10%);
  flex-basis: inherit;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 25px;
}
</style>
